{% extends 'base.html' %}
{% block title %}
Market Page
{%endblock%}
{% block content %}
<div class="row" style="margin-left: 20px;margin-top: 20px;">
    <div class="col-8">
        <h2>Available Items on the Market</h2>
        <p>Click on one of the Items to start buying</p>
        <br>
        <table class="table table-hover table-dark">
            <thead>
                <tr>
                    <!-- Your Columns HERE -->
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Barcode</th>
                    <th scope="col">Price</th>
                    <th scope="col">Options</th>
                </tr>
            </thead>
            <tbody>
                <!-- Your rows inside the table HERE: -->
                {% for item in items %}
                {% include 'include/items_models.html' %}
                <tr>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.barcode}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button class="btn btn-outline btn-info" data-toggle="modal" data-target="#exampleModal-{{item.id}}">More Info</button>
                        <button class="btn btn-outline btn-success" data-toggle="modal" data-target="#Purchase-Modal-{{ item.id }}">Purchase this item</button>
                    </td>
                </tr>
                {% endfor %}

            </tbody>
        </table>
    </div>
    <div class="col-4">
        <h2>Owned Items</h2>
        <p>Click on sell Items to put an item back to the Market</p>
        <br>
        <div class="row">
            {% for owned_item in owned_items %}
            {% include 'include/owned_items.html' %}
            <div class="col-md-6">
                <div style="margin-bottom: 5px" class="card text-center bg-dark">
                    <div class="card-body">
                        <h5 class="card-title">{{owned_item.name}}</h5>
                        <button type="button" class="btn btn-outline-danger" style="margin-bottom: 5px"
                                data-toggle="modal" data-target="#Selling-Modal-{{ owned_item.id }}">
                            Sell this Item
                        </button>
                        <p class="card-text"><strong>This item costs {{owned_item.price}}$</strong></p>
                    </div>
                </div>
            </div>
            {%endfor%}
        </div>
    </div>
</div>

{%endblock%}